import { Typography } from "antd"
import { Tooltip } from "antd"
import { ColumnGroupType, ColumnType } from "antd/es/table"
import { useSelector } from "react-redux"
import styled from "styled-components"

import { merchantList } from "@/stores/config/config.store"

export const StyledParagraph = styled.p`
	color: ${props => props.color || ""}; /* Default color is black */
`

const getMerchantById = (merchants: FormConfig.MerchantDetail[], newFormat: (arg: string) => string) => (id: string | number) => {
	return String(id) === "0"
		? newFormat("common.super")
		: merchants.find((item: { id: string | number }) => item.id === id)?.merchantName || "-"
}

const renderNullableValue = (field: string, color = "", prefix = "") =>
	function ColorTableCell(_text: any, record: any) {
		return (
			<Typography.Text ellipsis style={{ color: color }}>
				{prefix}
				{record?.[field] ? record[field] : "-"}
			</Typography.Text>
		)
	}

const useMemberLogin = (newFormat: (arg: string) => string): Record<string, ColumnGroupType<any> | ColumnType<any>> => {
	const merchants = useSelector(merchantList)

	return {
		memberLoginSerialNo: {
			dataIndex: "serialNo",
			key: "serialNo",
			title: newFormat("label.member.serial_no"),
			align: "center",
			width: 60,
			render: (_: any, _1: any, index: number) => {
				return <p>{index + 1}</p>
			}
		},
		memberLoginLoginTime: {
			dataIndex: "loginTime",
			key: "loginTime",
			title: newFormat("label.member.login_time"),
			align: "center",
			width: 200
		},
		memberLoginLoginStatus: {
			dataIndex: "loginStatus",
			key: "loginStatus",
			title: newFormat("label.member.login_status"),
			align: "center",
			width: 80,
			render: (_text: any, record: any) => (
				<StyledParagraph color={record.loginStatus === "1" ? "green" : "red"}>
					{newFormat(`label.member.${record.loginStatus === "1" ? "success" : "failed"}`)}
				</StyledParagraph>
			)
		},
		memberLoginUserName: {
			dataIndex: "userName",
			key: "userName",
			title: newFormat("label.member.login_account"),
			align: "center",
			width: 120,
			render: renderNullableValue("userName")
		},
		memberLoginMerchant: {
			key: "merchantId",
			dataIndex: "merchantId",
			title: newFormat("label.belong_merchant"),
			align: "center",
			width: 120,
			render: (text: string) => getMerchantById(merchants, newFormat)(text)
		},
		memberLoginAccountType: {
			dataIndex: "accountType",
			key: "accountType",
			title: newFormat("label.member.account_type"),
			align: "center",
			width: 80,
			render: (_text: any, record: any) => <p>{newFormat(`dict.account_type.${record.accountType - 1}.description`)}</p>
		},
		memberLoginLoginIp: {
			dataIndex: "loginIp",
			key: "loginIp",
			title: newFormat("label.member.login_ip"),
			align: "center",
			width: 160,
			render: renderNullableValue("loginIp")
		},
		memberLoginLabelName: {
			dataIndex: "labelName",
			key: "labelName",
			title: (
				<>
					{newFormat("label.member.login_ip")}
					<br />
					{newFormat("label.risk_level")}
				</>
			),
			align: "center",
			width: 200,
			render: (_text: any, record: any) => (
				<div>
					{renderNullableValue("loginIp")(_text, record)}
					<br />
					{renderNullableValue("ipControlName", "red", newFormat("label.member.risk_control_level"))(_text, record)}
				</div>
			)
		},
		memberLoginLoginIPCount: {
			dataIndex: "loginIPCount",
			key: "loginIPCount",
			title: newFormat("label.member.number_acc_same_ip"),
			align: "center",
			width: 180,
			render: renderNullableValue("loginIPCount")
		},
		memberLoginIpAttribution: {
			dataIndex: "ipAttribution",
			key: "ipAttribution",
			title: newFormat("member.ip_attribution"),
			align: "center",
			width: 150,
			render: renderNullableValue("ipAttribution")
		},
		memberLoginTopProxyName: {
			dataIndex: "topProxyName",
			key: "topProxyName",
			title: newFormat("label.member.belong_agent"),
			align: "center",
			width: 150,
			render: renderNullableValue("topProxyName")
		},
		memberLoginParentProxyName: {
			dataIndex: "parentProxyName",
			key: "parentProxyName",
			title: newFormat("label.member.superior_agent"),
			align: "center",
			width: 200,
			render: renderNullableValue("parentProxyName")
		},
		memberLoginDeviceType: {
			dataIndex: "deviceType",
			key: "deviceType",
			title: newFormat("label.member.device_type"),
			align: "center",
			width: 180,
			// render: getFromDic("gameDeviceType")
			render: (_text: any, record: any) => (
				<p>
					{record.deviceType !== "0" ? newFormat(`dict.login_device_type.${parseInt(record.deviceType) - 1}.description`) : "-"}
				</p>
			)
		},
		memberLoginDeviceNoSimple: {
			dataIndex: "deviceNo",
			key: "deviceNo",
			title: newFormat("label.member.device_no"),
			align: "center",
			width: 350,
			render: renderNullableValue("deviceNo")
		},
		memberLoginDeviceNo: {
			dataIndex: "deviceNo",
			key: "deviceNo",
			width: 250,
			title: () => (
				<div>
					{newFormat("label.member.device_no")}
					<br />
					{newFormat("label.member.risk_control")}
				</div>
			),
			align: "center",
			render: (_text: any, record: any) => {
				return record?.deviceNo?.length > 28 ? (
					<Tooltip title={record?.deviceNo + " " + newFormat("label.member.risk_control_level") + ": -"}>
						<div>
							{renderNullableValue("deviceNo")(_text, record)}
							<br />
							{renderNullableValue("deviceNoControlName", "red", newFormat("label.member.risk_control_level"))(_text, record)}
						</div>
					</Tooltip>
				) : (
					<div>
						{renderNullableValue("deviceNo")(_text, record)}
						<br />
						{renderNullableValue("deviceNoControlName", "red", newFormat("label.member.risk_control_level"))(_text, record)}
					</div>
				)
			}
		},
		memberLoginDeviceNoCount: {
			dataIndex: "deviceNoCount",
			key: "deviceNoCount",
			title: newFormat("label.member.number_device_same_device"),
			align: "center",
			width: 150,
			render: renderNullableValue("loginIPCount")
		},
		memberLoginLoginReference: {
			dataIndex: "loginReference",
			key: "loginReference",
			title: newFormat("label.member.login_reference"),
			align: "center",
			width: 200,
			render: (_text: any, record: any) => {
				return record?.loginReference?.length > 28 ? (
					<Tooltip title={record?.loginReference}>{renderNullableValue("loginReference")(_text, record)}</Tooltip>
				) : (
					renderNullableValue("loginReference")(_text, record)
				)
			}
		},
		memberLoginBrowseContent: {
			dataIndex: "browseContent",
			key: "browseContent",
			title: newFormat("label.member.browse_content"),
			align: "center",
			width: 200,
			render: (_text: any, record: any) => {
				return record?.browseContent?.length > 28 ? (
					<Tooltip title={record?.browseContent}>{renderNullableValue("browseContent")(_text, record)}</Tooltip>
				) : (
					renderNullableValue("browseContent")(_text, record)
				)
			}
		},
		memberLoginGps: {
			dataIndex: "gps",
			key: "gps",
			title: newFormat("label.member.gps_info"),
			align: "center",
			width: 100,
			render: renderNullableValue("gps")
		},
		memberLoginRemark: {
			dataIndex: "remark",
			key: "remark",
			title: newFormat("label.remarks"),
			align: "center",
			width: 100,
			render: renderNullableValue("remark")
		}
	}
}

export default useMemberLogin
